<template>
    <div class="check">
      <Row v-if="total > 0">
        <Col v-for="(item, index) in data"
             :key="item.id"
             :data-index="index"
             :xs="24" :sm="12" :md="12" :lg="4">
          <item @max="max(index)"
                @pass="pass(index)"
                @delete="clickDel(index)"
                :data="item">
          </item>
        </Col>
      </Row>
      <h5 class="empty" v-else>暂无审核素材</h5>

      <Page style="margin-top: 10px;"
            v-show="total > 0"
            :total="total"
            :page-size="page_size"
            @on-change="pageChange"
      />

      <!--S放大素材-->
      <max v-if="max_data.show"
           :type="max_data.type"
           :src="max_data.src"
           @close="max_data.show = false">
      </max>
      <!--E放大素材-->

      <!--S删除审核素材，弹窗写入审核失败原因-->
      <Modal
        v-model="remark_modal.show"
        title="请输入审核失败原因"
        :footer-hide="true"
        width="400"
      >
        <Input placeholder="请输入审核失败原因" v-model="remark_modal.remark"></Input>
        <div style="overflow: hidden;margin-top: 10px;">
          <Button type="primary" style="float: right;" @click="remark_submit">确认</Button>
        </div>
      </Modal>
      <!--E删除审核素材，弹窗写入审核失败原因-->
    </div>
</template>

<script>
import Item from '../components/item'
import Max from '../components/max'
export default {
  name: 'check',
  data () {
    return {
      // 放大播放素材组件数据
      max_data: {
        show: false,
        src: '',
        type: 'image'
      },
      // 素材列表
      data: [],
      // 当前页面
      page: 1,
      // 每页数量
      page_size: 24,
      // 列表总数
      total: 0,
      // 素材审核失败原因
      remark_modal: {
        remark: '',
        show: false
      },
      // 操作数量列表下标
      handle_index: 0
    }
  },
  components: {
    Item,
    Max
  },
  mounted () {
    this.getTotal()
    this.getList()
  },
  methods: {
    /**
     * 放大
     */
    max (index) {
      let data = this.data[index]
      this.max_data = {
        show: true,
        type: data.type,
        src: data.type === 'image' ? data.image_url : data.video_url
      }
    },
    /**
     * 获取审核素材列表
     */
    getList () {
      this.$get('media/getCheckList', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.data = data
          } else {
            this.data = []
          }
        })
    },
    getTotal () {
      this.$get('media/getCheckTotal')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.total = parseInt(data)
          }
        })
    },
    pageChange (page) {
      this.page = page
      this.getList()
    },
    /**
     * 通过审核
     * @param index
     */
    pass (index) {
      this.$post('media/changeStatus', {
        media_id: this.data[index].id,
        status: 1,
        source: 'manage_check'
      })
        .then((res) => {
          let { code } = res.data
          if (code === 0) {
            this.getTotal()
            this.getList()
          } else {
            this.$Message.error({ content: '操作失败' })
          }
        })
    },
    /**
     * 点击删除素材
     */
    clickDel (index) {
      this.remark_modal.show = true
      this.handle_index = index
    },
    /**
     * 确认删除素材原因
     */
    remark_submit () {
      let remark = this.remark_modal.remark.trim()
      if (remark.length <= 0) {
        this.$Message.error('素材删除原因不能为空')
        return false
      } else if (remark.length > 20) {
        this.$Message.error('素材删除原因字数不能大于20')
        return false
      }
      this.remark_modal.show = false
      this.del(this.handle_index)
    },
    /**
     * 删除素材
     * @param index
     */
    del (index) {
      this.$post('media/delete', {
        media_id: this.data[index].id,
        source: 'manage_check',
        remark: this.remark_modal.remark
      })
        .then((res) => {
          this.remark_modal.remark = ''
          let { code } = res.data
          if (code === 0) {
            this.getTotal()
            this.getList()
          } else {
            this.$Message.error({ content: '操作失败' })
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
  .empty{
    text-align: center;
  }
</style>
